<template>
  <x-dialog v-model="value" :dialog-style="{background: 'transparent', width: '90%', maxWidth: 'none'}">
    <div flex="dir:top main:center cross:center" class="component-tips">
      <slot name="title"></slot>
      <input v-if="type === 'confirm'" v-model="val" :type="inputType" :placeholder="placeholder" :maxlength="maxLength">
      <div flex="main:justify  cross:center" class="btns">
        <img @click="cancelHandle" src="../assets/images/tips/cancel.png"/>
        <img @click="confirmHandle" src="../assets/images/tips/confirm.png"/>
      </div>
    </div>
  </x-dialog>
</template>

<script>
  import XDialog from 'vux/src/components/x-dialog';

  export default {
    props: {
      value: {
        default: false,
        require: true,
        type: Boolean
      },
      type: {
        default: 'alert',
        type: String
      },
      placeholder: {
        default: ''
      },
      clearWhenConfirm: {
        default: false,
        type: Boolean
      },
      maxLength: {
        default: 100,
        type: Number
      },
      inputType: {
        default: 'text',
        type: String
      }
    },
    data() {
      return {
        val: ''
      }
    },
    methods: {
      cancelHandle() {
        this.val = '';
        this.$emit('on-cancel');
        this.$emit('input', false);
      },
      confirmHandle() {
        if (this.type === 'alert') {
          this.$emit('input', false);
        }
        this.$emit('on-confirm', this.val);
        if (this.clearWhenConfirm) {
          this.val = '';
        }
      }
    },
    components: {
      XDialog
    }
  }
</script>

<style lang="scss">
  @import "../assets/css/funcs.scss";

  .component-tips {
    padding: pxToRem(40px);
    box-sizing: border-box;
    background: #D02D18;
    overflow: hidden;
    border-radius: pxToRem(10px);
    .title {
      margin-top: pxToRem(12px);
      max-width: 80%;
    }
    input {
      margin-top: pxToRem(50px);
      width: 80%;
      line-height: 2;
      text-indent: 1em;
      border: none;
      border-radius: pxToRem(10px);
      outline: none;
    }
    .btns {
      width: 90%;
      margin-top: pxToRem(56px);
      img {
        width: 40%;
      }
    }
  }
</style>
